<!doctype html>
<html ng-app="app">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <style type="text/css">
    	html {
    		width: 100%;
    		height: 100%;
    		overflow-x:hidden; 
    	}
		body {
			text-align: left;
			width: 100%;
			overflow: hidden;
			background: #e9dfc7;
		}
		.m-read-content {
			font-size: 14px;
			color: #555;
			line-height: 31px;
			padding:15px;
		}
		.m-read-content h4 {
			font-size: 20px;
			color: #736357;
			border-bottom: 1px solid #736357;
			letter-spacing: 2px;
			margin:0 0 1em 0;
		}
		.m-read-content p {
			text-indent: 2em;
			margin:0.5em 0;
			letter-spacing: 0;
			line-height: 24px;
		}
		.u-tab {
			height: 34px;
			margin:10px auto;
			line-height: 34px;
			border-radius: 8px;
			border:1px solid #858382;
			font-size: 12px;
			background: #000;
			opacity: 0.9;
		}
		.u-tab li {
			display: inline-block;
			width: 49%;
			border-right:1px solid #858382;
			text-align: center;
			color: #fff;
		}
		.u-tab li:nth-child(2) {
			border-right: none;
		}
		.m-button-bar {
			width: 70%;
			max-width: 800px;
			padding:5px;
			margin:0 auto;
		}
		.top-nav {
			position: fixed;
			top: 0;
			height: 50px;
			width:100%;
			z-index: 9999;
			background: #000;
		}
		.icon-back {
			position: absolute;
			top: 14px;
			left: 10px;
			width: 23px;
			height: 23px;
			background: url();
			background-size: contain;
		}
		.nav-title {
			position: absolute;
			top: 16px;
			left:42px;
			color: #d5d5d6;
		}
		.bottom-nav {
			position: fixed;
			bottom: 0;
			height: 70px;
			width:100%;
			z-index: 9999;
			background: #000;
		}
		.bottom-nav ul {
			text-align: center;
		}
		.bottom-nav li {
			display: inline-block;
			width: 30%;
			padding: 15px 0;
			text-align: center;
			font-size:12px;
			color: #d5d5d6;
		}
		.bottom-nav li div {
			margin:0 auto;
			line-height: 18px;
		}
		.bottom-nav li div:first-child {
			margin-bottom: 7px;
			background-size: contain;
		}
		.icon-catalog {
			width: 15px;
			height: 15px;
			background: url();
		}
		.icon-font {
			width: 20px;
			height: 13px;
			background:url();
		}
		.icon-night {
			width: 16px;
			height: 16px;
			background: url();
		}
		.icon-day {
			width: 16px;
			height: 16px;
			background: url(); 
		}
		.nav-pannel-bk {
			position: fixed;
			bottom: 70px;
			height: 135px;
			width: 100%;
			background: #000;
			opacity: 0.9;
			z-index: 10000;
		}
		.nav-pannel {
			position: fixed;
			bottom: 70px;
			height: 135px;
			width: 100%;
			background: none;
			color: #fff;
			z-index: 10001;
		}
		.child-mod {
			padding:5px 10px;
			margin:15px;
		}
		.child-mod span {
			display: inline-block;
			padding-right:20px;
			padding-left: 10px;
		}
		.font-size-button {
			background: none;
			border:1px solid #8c8c8c;
			color: #fff;
			border-radius: 16px;
			padding:5px 40px;
			outline: none; 
		}
		.child-mod button:nth-child(2) {
			margin-right: 10px;
		}
		.bk-container {
			position: relative;
			width: 30px;
			height: 30px;
			background: #fff;
			border-radius:50%;
			margin-right: 10px;
			display: inline-block;
			vertical-align: -14px;
		}
		.bk-container-current {
			position: absolute;
			top: -2px;
			left: -2px;
			width: 32px;
			height: 32px;
			border-radius:50%;
			border:1px #ff7800 solid;
			display: inline-block;
		}
		.artical-action-mid {
			position: fixed;
			z-index: 10002;
			width: 100%;
			height: 40%;
			top: 30%;
		}
		.current {
			width: 22px;
			height: 15px;
			background: url();
		}
    </style>
</head>
<body>
	<div id="root" class="container">
		<div class="m-artical-action">
			<div class="artical-action-mid" id="action_mid"></div>
		</div>
		<div id="top-nav" class="top-nav" style="display: none;">
			<div class="icon-back"></div>
			<div class="nav-title">返回书架</div>
		</div>
		<div id="fiction_chapter_title"></div>
		<div id="fiction_container" class="m-read-content">
			<h4>了不起的盖茨比</h4>
			<p>
				Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that's no matter--tomorrow we will run faster, stretch out our arms farther.... And one fine morning---- So we beat on, boats against the current, borne back ceaselessly into the past.
			</p>
			<p>
				盖茨比信奉这盏绿灯，这个一年年在我们眼前渐渐远去的极乐的未来。它从前逃脱了我们的追求，不过那没关系——明天我们跑得更快一点，把胳臂伸得更远一点……总有一天……我们奋力前行，逆水行舟，不停地被推回到过去。
			</p>
			<p>
				盖茨比信奉这盏绿灯，这个一年年在我们眼前渐渐远去的极乐的未来。它从前逃脱了我们的追求，不过那没关系——明天我们跑得更快一点，把胳臂伸得更远一点……总有一天……我们奋力前行，逆水行舟，不停地被推回到过去。
			</p>
			<p>
				盖茨比信奉这盏绿灯，这个一年年在我们眼前渐渐远去的极乐的未来。它从前逃脱了我们的追求，不过那没关系——明天我们跑得更快一点，把胳臂伸得更远一点……总有一天……我们奋力前行，逆水行舟，不停地被推回到过去。盖茨比信奉这盏绿灯，这个一年年在我们眼前渐渐远去的极乐的未来。它从前逃脱了我们的追求，不过那没关系——明天我们跑得更快一点，把胳臂伸得更远一点……总有一天……我们奋力前行，逆水行舟，不停地被推回到过去。盖茨比信奉这盏绿灯，这个一年年在我们眼前渐渐远去的极乐的未来。它从前逃脱了我们的追求，不过那没关系——明天我们跑得更快一点，把胳臂伸得更远一点……总有一天……我们奋力前行，逆水行舟，不停地被推回到过去。盖茨比信奉这盏绿灯，这个一年年在我们眼前渐渐远去的极乐的未来。它从前逃脱了我们的追求，不过那没关系——明天我们跑得更快一点，把胳臂伸得更远一点……总有一天……我们奋力前行，逆水行舟，不停地被推回到过去。
			</p>
		</div>
		<div class="m-button-bar">
			<ul class="u-tab">
				<li id="prev_button">上一章</li>
				<li id="next-button">下一章</li>
			</ul>
		</div>
		<div id="bottom-nav" class="bottom-nav" style="display: none;">
			<ul>
				<li>
					<div class="icon-catalog"></div>
					<div class="bottom-title">目录</div>
				</li>
				<li id="font-button">
					<div class="icon-font"></div>
					<div class="bottom-title">字体</div>
				</li>
				<li id="night-button">
					<div class="item-wrap" id="day_icon" style="display: none;">
						<div class="icon-day"></div>
						<div class="bottom-title">白天</div>
					</div>
					<div class="item-wrap" id="night_icon">
						<div class="icon-night"></div>
						<div class="bottom-title">夜间</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="nav-pannel-bk font-container" style="display: none;"></div>
		<div class="nav-pannel font-container" id="font-container" style="display: none;">
			<div class="child-mod">
				<span>字号</span>
				<button id="large-font" class="font-size-button">大</button>
				<button id="small-font" class="font-size-button">小</button>
			</div>
			<div class="child-mod">
				<span>背景</span>
				<div class="bk-container" style="background-color:#f7eee5">
					<div class="bk-container-current" style="display:none;"></div>
				</div>
				<div class="bk-container" style="background-color:#e9dfc7">
					<div class="bk-container-current" style="display:none;"></div>
				</div>
				<div class="bk-container" style="background-color:#a4a4a4">
					<div class="bk-container-current" style="display:none;"></div>
				</div>
				<div class="bk-container" style="background-color:#cdefce">
					<div class="bk-container-current" style="display:none;"></div>
				</div>
				<div class="bk-container" style="background-color:#283548">
					<div class="bk-container-current" style="display:none;"></div>
				</div>
			</div>
		</div>
	</div>

	<script src="lib/zepto.min.js"></script>
	<script>
		window.jQuery = $;
	</script>
	<script src="js/jquery.base64.js"></script>
	<script src="js/jquery.jsonp.js"></script>
	<script>
	(function(){
		var Util = (function(){
			var prefix = 'html5_reader_';
			var StorageGetter = function(key){
				return localStorage.getItem(prefix + key);
			}
			var StorageSetter = function(key,val){
				return localStorage.setItem(prefix + key,val);
			}
			return {
				StorageGetter:StorageGetter,
				StorageSetter:StorageSetter
			}
		})();
		var Dom = {
			top_nav : $('#top-nav'),
			bottom_nav : $('.bottom-nav'),
			font_container : $('.font-container'),
			font_button : $('#font-button'),
			font_button_icon : $('#font-button .icon-font')
		}
		var Win = $(window);
		var Doc = $(document);
		var RootContainer = $('#fiction_container');
		var initFontSize = Util.StorageGetter('font_size');
		initFontSize = parseInt(initFontSize);
		if(!initFontSize){
			initFontSize = 14;
		}
		RootContainer.css('font_size',initFontSize);

		function main(){
			//整个项目的入口函数
			EventHanlder();
		}
		function ReaderModel(){
			//实现和阅读器相关的数据交互的方法
			
		}
		function ReaderBaseFrame(){
			//渲染基本的ui结构
			
		}
		function EventHanlder(){
			//交互的事件绑定
			$('#action_mid').click(function(){
				if(Dom.top_nav.css('display') == 'none') {
					Dom.bottom_nav.show();
					Dom.top_nav.show();
				}else{
					Dom.bottom_nav.hide();
					Dom.top_nav.hide();
					Dom.font_container.hide();
					Dom.font_button_icon.removeClass('current');
				}
			});
			Dom.font_button.click(function(){
				if(Dom.font_container.css('display') == 'none'){
					Dom.font_container.show();
					Dom.font_button_icon.addClass('current');
				}else{
					Dom.font_container.hide();
					Dom.font_button_icon.removeClass('current');
				}
			});
			$('#night-button').click(function(){
				//触发背景切换的事件
			});

			$('#large-font').click(function(){
				if(initFontSize > 20) {
					return;
				}
				initFontSize += 1;
				RootContainer.css('font-size',initFontSize);
				Util.StorageSetter('font_size',initFontSize);
			});
			$('#small-font').click(function(){
				if(initFontSize < 12) {
					return;
				}
				initFontSize -= 1;
				RootContainer.css('font-size',initFontSize);
				Util.StorageSetter('font_size',initFontSize);
			});

			Win.scroll(function(){
				Dom.bottom_nav.hide();
				Dom.top_nav.hide();
				Dom.font_container.hide();
				Dom.font_button_icon.removeClass('current');
			})
		}

		main();

	})();
	</script>
</body>
</html>
